import React from 'react';
import { Tools, Tabs } from 'weaver-mobile';
import Loading from '../../Loading';

class CustomPage extends React.Component {
  constructor(props) {
    super(props);
    this.onLoadData = this.onLoadData.bind(this);
    this.onLoadMoreData = this.onLoadMoreData.bind(this);
    this.state = {
      loading: false,
      visible2: false,
      loading2: false,
      tabs: [],
      tab: {},
      pagenum: 1,
      result: {}
    };
  }

  componentWillMount() {
    const { tabs } = this.props;
    if (tabs && tabs.length) {
      const tab = tabs[0];
      this.setState({ tabs });
      this.onLoadData(tab);
    }
  }

  componentWillReceiveProps(nextProps) {
    if (!nextProps.refreshing) {
      const { tabs } = nextProps;
      if (tabs && tabs.length) {
        const tab = tabs[0];
        this.setState({ tabs });
        this.onLoadData(tab);
      }
    }
  }

  render() {
    const { loading, loading2, visible2, tabs = [], tab = {}, result = {} } = this.state;
    let { url, height, html } = result;
    height = height ? parseInt(height) : 350;

    let tabsCom = null;
    if (tabs && tabs.length > 1) {
      let page = 0;
      for (let i = 0, len = tabs.length; i < len; i++) {
        if (tabs[i].tabid == tab.tabid) {
          page = i;
          break;
        }
      }
      tabsCom = <Tabs tabs={tabs} page={page} renderTabBar={props => <Tabs.ExpandTabBar {...props} fix={8} />} onTabClick={item => this.onLoadData(item)} />;
    }

    let moreCom = null;
    if (visible2) {
      moreCom = (
        <div className="more">
          <Loading loading={loading2}>
            <div className="icon-more" onClick={this.onLoadMoreData} />
          </Loading>
        </div>
      );
    }

    let dataCom = null;
    if (html) {
      dataCom = (
        <div className="data-ul">
          <div dangerouslySetInnerHTML={{ __html: html }} />
        </div>
      );
    } else if (url) {
      if (url == '/mobilemode/appHomepageView.jsp?appHomepageId=335') {
        height = window.innerHeight - 40;
      }
      dataCom = (
        <div className="data-ul">
          <div style={{ width: '100%', height, overflow: 'hidden' }}>
            <iframe src={url} width="100%" height="100%" frameBorder="0" />
          </div>
        </div>
      );
    } else {
      dataCom = <div className="data-ul" />;
    }

    return (
      <div className="content">
        {tabsCom}
        <div className="data">
          <Loading loading={loading}>{dataCom}</Loading>
        </div>
        {moreCom}
      </div>
    );
  }

  onLoadData(tab, pagenum = 1) {
    const { hpid, subCompanyId, eid, ebaseid } = this.props;
    const params = { hpid, subCompanyId, eid, ebaseid, pageIndex: pagenum };

    this.setState({ loading: true, visible2: false, tab, pagenum });
    const { url, moreUrl, height } = tab;
    if (/^(http|https):\/\/([\w.]+\/?)\S*/.test(url) || url == '/mobile/plugin/4/index.jsp' || url == '/mobilemode/appHomepageView.jsp?appHomepageId=335') {
      this.setState({ loading: false, result: { url, moreUrl, height } });
    } else {
      Tools.callApi({ url, method: 'GET', params, type: 'text' }).then(html => {
        this.setState({ loading: false, visible2: !!moreUrl, result: { url, moreUrl, height, html } });
      });
    }
  }

  onLoadMoreData() {
    const { hpid, subCompanyId, eid, ebaseid } = this.props;
    const { pagenum: oldPagenum, result = {} } = this.state;
    const pagenum = oldPagenum + 1;
    const { moreUrl } = result;
    const params = { hpid, subCompanyId, eid, ebaseid, pageIndex: pagenum };

    this.setState({ loading2: true, pagenum });
    Tools.callApi({ url: moreUrl, method: 'GET', params, type: 'text' }).then(html => {
      this.setState({ loading2: false, result: Object.assign({}, result, { html }) });
    });
  }
}

export default CustomPage;
